<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="900" destroy-on-close
        @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="120px" label-position="right" v-loading="loading">
            <el-row>
                <el-col :span="24">
                    <div class="divider-title">基础信息</div>
                    <el-form-item label="词汇量范围" prop="name">
                        <el-input v-model="form.name" placeholder="请输入词汇量范围" clearable maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                    <el-form-item label="范围级别" prop="level">
                        <el-select v-model="form.level" placeholder="请选择范围级别" clearable filterable :disabled="form.id != null ? true : false" style="width: 100%;">
                            <el-option :label="item.name" :value="item.value" v-for="(item,index) in levelData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="词汇最低数量" prop="minimumNumber">
                        <el-input v-model="form.minimumNumber" placeholder="请输入词汇最低数量" clearable></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="词汇数量" prop="words">
                        <el-input v-model="form.words" placeholder="请输入词汇数量" clearable></el-input>
                    </el-form-item> -->

                    <div class="divider-title">词汇量范围</div>
                    <ruleExtendForm ref="ruleExtendForm" :variant="form.ruleExtend"></ruleExtendForm>

                    <div class="divider-title">报告内容</div>
                    <el-form-item label="语言能力" prop="languageAbility">
					    <sc-editor v-model="form.languageAbility" placeholder="请输入语言能力" :height="350"></sc-editor>
				    </el-form-item>
                    <el-form-item label="测评分析" prop="evaluationAnalysis">
					    <sc-editor v-model="form.evaluationAnalysis" placeholder="请输入测评分析" :height="350"></sc-editor>
				    </el-form-item>
                    <el-form-item label="学习建议" prop="learningAdvice">
					    <sc-editor v-model="form.learningAdvice" placeholder="请输入学习建议" :height="350"></sc-editor>
				    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { defineAsyncComponent } from 'vue'
const scEditor = defineAsyncComponent(() => import('@/components/scEditor'))
import ruleExtendForm from './components/ruleExtend.vue'
export default {
    emits: ['success', 'closed'],
    components: {
		scEditor,
        ruleExtendForm
	},
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增词汇检测规则',
                edit: '编辑词汇检测规则',
                show: '查看'
            },
            visible: false,
            loading: false,
            isSaveing: false,
            //表单数据
            form: this.getDefaultRuleForm(),
            //验证规则
            rules: {
                name: [
                    { required: true, message: '请输入词汇检测范围', trigger: 'blur' },
                ],
                level: [
                    { required: true, message: '请选择范围级别', trigger: 'change' },
                ],
                minimumNumber: [
                    { required: true, message: '请输入词汇最低数量', trigger: 'blur' },
                    { pattern: /^[1-9]\d*$/, message: '只能输入大于0的整数', trigger: 'blur'}
                ],
                words: [
                    { required: true, message: '请输入词汇数量', trigger: 'blur' },
                    { pattern: /^[1-9]\d*$/, message: '只能输入大于0的整数', trigger: 'blur'}
                ],
                languageAbility: [
                    { required: true, message: '请输入语言能力', trigger: 'blur' },
                ],
                evaluationAnalysis: [
                    { required: true, message: '请输入测评分析', trigger: 'blur' },
                ],
                learningAdvice: [
                    { required: true, message: '请输入学习建议', trigger: 'blur' },
                ],
                sort: [
                    {
                        required: false,
                        validator: (rule, value, callback) => {
                            var myreg = /^(-|[0-9])\d*$/;
                            if (!value) {
                                callback(new Error('请输入排序'))
                            } else if (!myreg.exec(value)) {
                                callback(new Error('只能输入整数'))
                            } else {
                                callback()
                            }
                        }
                    },
                ]
            },
            levelData: [
                {'name': '初级', 'value': 1},
                {'name': '中级', 'value': 2},
                {'name': '高级', 'value': 3},
            ],
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }

                let data = {}
                for (let key in this.form) {
                    if (key == 'ruleExtend') {
                        data[key] = this.$refs.ruleExtendForm.getVariants()
                        continue
                    }
                    data[key] = this.form[key]
                }

                try {
                    this.isSaveing = true;
                    if (this.form.id) {
                        await this.$API.vocabularyRule.action.put(data)
                    } else {
                        await this.$API.vocabularyRule.action.post(data)
                    }
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$notify.success("保存成功")
                } finally {
                    this.isSaveing = false;
                }
            })
        },
        //表单注入数据
        async setData(row) {
            this.loading = true
            await this.$API.vocabularyRule.action.get({id: row.id}).then(res => {
                let _form = {
                    id: res.data.id,
                    name: res.data.name,
                    minimumNumber: res.data.minimumNumber,
                    level: res.data.level ? res.data.level.value : '',
                    words: res.data.words,
                    languageAbility: res.data.languageAbility,
                    evaluationAnalysis: res.data.evaluationAnalysis,
                    learningAdvice: res.data.learningAdvice,
                    sort: res.data.sort,
                    ruleExtend: res.data.ruleExtend
                }

                this.form = _form
            }).finally(() => {
				this.loading = false
			})
        },
        getDefaultRuleForm() {
            return {
                id: null,
                name: '',
                minimumNumber: '',
                level: '',
                words: '',
                languageAbility: '',
                evaluationAnalysis: '',
                learningAdvice: '',
                sort: '',
                ruleExtend: []
            }
        },
    }
}
</script>

<style scoped>

.divider-title {
    background: #f5f5f5;
    padding-left: 10px;
    border: 0;
    height: 34px;
    line-height: 34px;
    margin: 15px 0;
    font-size: 18px;
    font-weight: 600;
}
</style>
